<template>
    <div>
        <!-- 头部 -->
        <div class="header">
            <div class="title">{{ filmInfo.name }}</div>
            <!-- 海报 -->
            <div class="poster">
                <img v-lazy="filmInfo.poster" width="100%" alt="" />
            </div>
            <div class="desc">
                <div class="name">
                    <div>{{ filmInfo.name }}</div>
                    <div>{{ filmInfo.grade }}</div>
                </div>
                <div class="category">{{ filmInfo.category }}</div>
                <div class="pireAt">{{ filmInfo.premiereAt | parseTime }}上映</div>
                <div class="nation">{{ filmInfo.nation }}|{{ filmInfo.runtime }}分</div>

                <div class="intro">
                    {{ filmInfo.synopsis }}
                </div>
            </div>
        </div>

        <!-- 演职人员 -->
        <div class="actors">
            <div>演职人员</div>
            <div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <!-- 循环演职人员 -->
                        <div v-for="item in filmInfo.actors" :key="item.name" class="swiper-slide">
                            <img :src="item.avatarAddress" width="85" :alt="item.name" />
                            <div>{{ item.name }}</div>
                            <div>{{ item.role }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 剧照 -->
        <div class="photos"></div>

        <div class="buyTicket">
            <button>选座购票</button>
        </div>
    </div>
</template>

<script>
// 导入uri
import uri from "@/config/uri";
// 导入moment包
import moment from "moment";
// 导入swiper
import Swiper from "swiper"; //充其量相当于导入了swiper.js文件
// 导入swiper-bundle.min.css
import "swiper/swiper-bundle.min.css";
// 导入映射函数
import { mapMutations } from "vuex";
export default {
    data() {
        return {
            // 默认电影详情为空对象
            filmInfo: {},
        };
    },
    created() {
        // 进入到详情了，设置vuex的isShow为false
        this.$store.commit("common/setIsShow", false);

        // 获取电影id号
        let filmID = this.$route.params.filmID;
        this.$http.get(uri.getDetail + "?filmId=" + filmID).then((res) => {
            this.filmInfo = res.data.film;
            // 演职人员信息只有在接口获取到数据之后才有
            // 定时器可以解决异步渲染的问题（但是不推荐）
            // setTimeout(() => {
            //     new Swiper(".swiper-container", {
            //         // 每页显示4个
            //         slidesPerView: 4,
            //         // 每个之间的间距
            //         spaceBetween: 30,
            //     });
            // }, 1000);
            // vue中nextTick
            this.$nextTick(() => {
                new Swiper(".swiper-container", {
                    // 每页显示4个
                    slidesPerView: 4,
                    // 每个之间的间距
                    spaceBetween: 30,
                });
            });
        });
    },
    // 在方法中映射修改状态的函数
    methods: {
        ...mapMutations("common", ["setIsShow"]),
    },
    // 将要离开时显示底部菜单
    beforeDestroy() {
        this.setIsShow(true);
    },
    filters: {
        // 处理时间戳
        parseTime(timestamps) {
            // 语法：moment(时间戳).format(格式化)
            return moment(timestamps * 1000).format("YYYY-MM-DD");
        },
    },
};
</script>

<style scoped></style>
